<template>
  <div class="main">
    <div class="common-layout">
      <el-card body-style="padding: 0px;">
        <div class="flex-dis">
          <!-- 左边 -->
          <div class="login-left">
            <div class="img-left">
              <div>
                <div class="box-shadow"><img src="@/assets/b51b35e231fa7e6cbf61f207e999100.png" alt="" class="img">
                </div>
                <div class="text">欢迎！</div>
                <div class="text">智学无忧-后台管理系统</div>
              </div>
            </div>
          </div>
          <!-- 右边 -->
          <div class="from-right">
            <div>
              <p style="height: 40px;text-align: center;">登录</p>
              <div>
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                  <el-form-item prop="username"><el-input v-model="ruleForm.username" type="text" autocomplete="off"
                      :prefix-icon="User" /></el-form-item>
                  <el-form-item prop="password">
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off" :prefix-icon="Lock" />
                  </el-form-item>
                  <el-form-item><el-button type="primary" @click="handlelogin(ruleFormRef)">登录</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div>作者：曹老师</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage, type FormInstance } from 'element-plus'
import { useRouter,useRoute } from 'vue-router'
import {post} from '@/utlis/http'
import cookie from 'js-cookie'
import { useUserstore } from '@/stores/counter'
import {debounce} from '@/utlis/Debouncethrottle'
const route = useRoute()
const store = useUserstore()
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  username: 'user5',
  password: '5201314Xx'

})
//非空验证
const rules = reactive({
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
})

//表单验证
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      // 请求接口
      let data={
        _gp:'admin',
         _mt:'login',
         ...ruleForm
      }
      post(data).then(res => {
        let { errno, data: token, errmsg } = res as any
        if (200 === errno) {
          Object.assign(store.users,ruleForm)
          ElMessage.success('登录'+errmsg)
          let now = new Date()
          now.setTime(now.getTime() + 1000 * 60 * 30)
          cookie.set("token", token, { expires: now })//expires：指cookie过期的时间
          return Promise.resolve()
        } else {
          ElMessage.error(errmsg)
          return Promise.reject(errmsg)
        }
      }).then(() => {//拿到token再次请求
        post({_gp: 'admin',_mt: 'info'}).then((res:any) => {//成功就拿到个人信息并储存到状态管理
          let { errno, data, errmsg } = res
          if (200 === errno) {
            store.setuser(data)
            let back=route.query.back as string//拿到退出前的页面
            if (back) {//存在的情况登录成功直接跳转退出前的页面
              router.replace(back)
              return
            }
            router.replace('/')
            return Promise.resolve()

          } else {
            return Promise.reject(errmsg)
          }
        })

      }).catch(err => {
        ElMessage.error(err)
      })
    } else {

      return false
    }
  })
}
// 防抖
const handlelogin=debounce(submitForm,500)
</script>
<style lang="less" scoped>
.main {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/7db11ab7592dbf59a1f5d360dc02fd0.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;

  .flex-dis {
    display: flex;
    width: 60vw;
    height: 60vh;

    .from-right {
      text-align: center;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;

      .el-input {
        width: 25vw;

      }

      .el-button {
        margin: auto;
        width: 10vw;
      }
    }
  }

  .login-left {
    background-color: #005DE9;
    width: 25em;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .img {
    width: 5em;
    border-radius: 50%;
    box-shadow: 8px -3px 15px -3px white;
  }

  .el-card {
    border: 0;
  }

  .img-left {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    .text {
      color: white;
    }
  }

}
</style>
